<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绑定手机-荣钧健康直饮水</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="/css/rongjun_bindphone.css?t=<?php echo microtime(true); ?>"/>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	</head>
	<body class="bindingBj">
		<!--导航栏-->
		<header class="headerNav"><h1>荣钧健康饮水</h1></header>
		<!--导航栏-->
			<!--绑定表单-->
			<section class="bindingForm">
				<form action="v2/login/rongjun_test"  method="post" id="bind_phone_form">
						<div class="bindingLine">
							<label>手机号&nbsp;&nbsp;</label>
							<input type="text" name="phone" placeholder="输入您的手机号" />
							
						</div>
						<div class="bindingLine">
							<label>图片验证码</label>
							<input type="text" name="imgCaptcha" placeholder="输入图片验证码" />
							<img id="captchaImg" class="bingdingVerfiy" src="" />
						</div>
						<div class="bindingLine">
							<label>短信验证码</label>
							<input type="text" name="captcha" placeholder="输入验证码" />
							<a id="sendSMSBtn" >获取验证码</a>
						</div>
						<button type="button" class="submitBtn" id="submitBtn">登录</button>
				</form>
			</section>
			<!--绑定表单-->
		<div class="loading" id="loadingBox">
		    <div class="loadEffect">
		            <span></span>
		            <span></span>
		            <span></span>
		            <span></span>
		            <span></span>
		            <span></span>
		            <span></span>
		            <span></span>
		    </div>
		</div>
		
		
		<section class="zhezhao" style="display: none;" id="tipsBox">
			<div class="noBindMessage">
				<h2 id="tipsTitle">该微信尚未在荣钧饮水注册！</h2>
				<button id="tipsBtn">知道了</button>
			</div>
		</section>
		
		
		<script type="text/javascript">
		$(function(){
			var elForm = document.getElementById('bind_phone_form');
			var $phoneIpt = $(elForm.phone);
			var $imgCaptchaIpt = $(elForm.imgCaptcha);
			var $smsCaptchaIpt = $(elForm.captcha);
			var showTips = tips();//function
			var $loadingBox = $('#loadingBox');

			$phoneIpt.focus();

			// 图片验证码处理
			var captchaImgLoading = false;
			$('#captchaImg')
				.prop('src','/v2/captcha/img?t='+Math.random())
				.click(function(){
					if(captchaImgLoading) return true;
					captchaImgLoading = true;
					$loadingBox.show();
					this.src='/v2/captcha/img?t='+Math.random();
				})
				.on('load',function(){
					captchaImgLoading = false;
					$loadingBox.hide();
				})
			// 点击"获取验证码"
			var smsCaptchaSend = false;
			$('#sendSMSBtn').click(function(){
				var phone = $.trim($phoneIpt.val());
				var imgCaptcha = $.trim($imgCaptchaIpt.val());
				if(!is_phone(phone)){
					// $phoneIpt.focus();
					return showTips('手机号码格式不正确');
				}
				if(!imgCaptcha){
					// $imgCaptchaIpt.focus();
					return showTips('请输入图片验证码');
				}
				var url = '/v2/captcha/send';
				var data = {
					phone:phone,
					code:imgCaptcha,
				};
				$loadingBox.show();
				smsCaptchaSend = false;
				$.ajax({
					url:url,
					method:'post',
					data:data,
					dataType:'json',
					success:function(response){
						if(!response || response.error !== 0){
							var msg = response.msg || '图片验证码错误';
							return showTips(msg);
						}
						smsCaptchaSend = true;
						$smsCaptchaIpt.focus();
						showTips('短信发送成功!');
					},
					error:function(){
						return showTips('图片验证码错误!');
					},
					complete:function(){
						$loadingBox.hide();
					}
				})
			});
			// 点击"绑定手机号"
			$('#submitBtn').click(function(){
				var phone = $.trim($phoneIpt.val());
				var smsCaptcha = $.trim($smsCaptchaIpt.val());
				try{
					if( !smsCaptchaSend ){
						throw error('请先获取短信验证码!');
					}
					if(!is_phone(phone)){
						// $phoneIpt.focus();
						throw error('手机号码格式不正确');
					}
					if(!smsCaptcha){
						// $smsCaptchaIpt.focus();
						throw error('请输入短信验证码');
					}
				}catch(e){
					showTips(e&&e.msg||e);
					return false;
				}
				$loadingBox.show();
				

				function requestError(){
					showTips('系统繁忙,请稍后再试!',reload());
					return false;
				}

				function reload(){
					return function(){
						location.reload();
					}
				}
				elForm.submit();
				return true;
				var url = '/v2/login/rongjun_test';
				$.ajax({
					url:url,
					data:{
						phone:phone,
						captcha:smsCaptcha,
					},
					dataType:'json',
					success:function(response){
						if( !response || undefined===response.error ){
							return requestError('P');
						}
						var msg = response.msg || '';
						var errCode = parseInt(response.error);
						switch(errCode){
							case 0:// 成功
								alert('登录测试成功!');
							    break;
							default:
								msg = msg || '系统繁忙,请稍后再试[D]';
								alert(msg);
								return false;
								break;
						}
					},
					error:function(){
						requestError('E');
					},
					complete:function(){
						$loadingBox.hide();
					}
				})
				return false;
			});

			function is_phone(phone){
				return phone.match(/^[1][34578][0-9]{9}$/);
			}

			function error(msg){
				return {
					msg:msg,
				}
			}

			function tips(){
				var $box = $('#tipsBox');
				var $title = $box.find('#tipsTitle');
				var $btn = $box.find('#tipsBtn');
				var clickedCallbacks = [];
				$btn.click(function(){
					$box.fadeOut(400);
					while(clickedCallbacks.length){
						var callback = clickedCallbacks.shift();
						callback();
					}
				})
				return function(msg,clickedCallback){
					$title.text(msg);
					$box.fadeIn(400);
					if(clickedCallback && clickedCallback instanceof Function){
						clickedCallbacks.push(clickedCallback);
					}
					return false;
				}
			}
		});
		</script>
	</body>
</html>
